<template>
  <Form ref="form" :model="form" :rules="formRules" class="form">
    <Row class="form-row" :gutter="16">
      <Col :lg="6" :md="12" :sm="24">
      <FormItem
        prop="name2"
        label="任务名">
        <Input v-model="form.name2" placeholder="请输入任务名称"/>
      </FormItem>
      </Col>
      <Col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
      <FormItem
        prop="url2"
        label="任务描述">
        <Input v-model="form.url2" placeholder="请输入任务描述"/>
      </FormItem>
      </Col>
      <Col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
      <FormItem
        prop="owner2"
        label="执行人">
        <Select
          v-model="form.owner2"
          placeholder="请选择执行人"
        >
          <Option value="黄丽丽">黄丽丽</Option>
          <Option value="李大刀">李大刀</Option>
        </Select>
      </FormItem>
      </Col>
    </Row>
    <Row class="form-row" :gutter="16">
      <Col :lg="6" :md="12" :sm="24">
      <FormItem
        prop="approver2"
        label="责任人">
        <Select
          v-model="form.approver2"
          placeholder="请选择责任人"
        >
          <Option value="王伟">王伟</Option>
          <Option value="李红军">李红军</Option>
        </Select>
      </FormItem>
      </Col>
      <Col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
      <FormItem
        prop="dateRange2"
        label="提醒时间">
        <DatePicker type="datetime" placeholder="Select date" style="width: 400px" v-model="form.dateRange2"></DatePicker>
      </FormItem>
      </Col>
      <Col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
      <FormItem
        prop="type2"
        label="任务类型">
        <Select
          v-model="form.type2"
          placeholder="请选择任务类型">
          <Option value="定时执行">定时执行</Option>
          <Option value="周期执行">周期执行</Option>
        </Select>
      </FormItem>
      </Col>
    </Row>
    <FormItem v-if="showSubmit">
      <Button type="primary" @click="handleSubmit('form')">Submit</Button>
    </FormItem>
  </Form>
</template>

<script>
export default {
  name: 'TaskForm',
  props: {
    showSubmit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        name2: '',
        url2: '',
        owner2: '',
        approver2: '',
        dateRange2: '',
        type2: ''
      },
      formRules: {

      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
